<!--
 * @Author: Terry
 * @Date: 2022-12-02 11:36:00
 * @LastEditors: Terry
 * @LastEditTime: 2024-09-02 11:23:22
 * @Description: file content
 * @FilePath: \auxface_web\src\views\platform\auth\Layout.vue
-->
<!--
 * @Descripttion: 
 * @version: v1
 * @Author: Terry
 * @Date: 2020-06-04 17:18:56
 * @LastEditors: Terry
 * @LastEditTime: 2024-04-22 19:01:24
-->
<template>
    <div>
      <div class="container-full"> 
          <div class="header">
            <h2>
              {{$t('platform.auth.bigTitle')}}
            </h2>
          </div>
          <div class="content" :style="{ 'height' : buttonShow=='true' ?  '70%' : '80%' }">
            <div class="conten-box">
              <img src="https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/index.png?x-oss-process=style/thumb" alt="" class="left-img">
               <div class="login-container">
                    <div v-if="path == 'login' || type == 'qrCode'">
                        <div div class="t-c">
                          <h2>{{$t('platform.auth.welcome')}}</h2>
                        </div>
                        <div class="t-c m-t-10">
                          {{$t('platform.auth.title')}}
                        </div>
                    </div>
                  <el-card>
                    <el-tabs v-model="type" @tab-click="changeType">
                      <el-tab-pane :label="pane" name="loginForm">
                        <span >
                            <router-view></router-view>
                          </span>
                      </el-tab-pane>
                      <el-tab-pane :label="$t('platform.auth.scanLogin')" name="qrCode">
                      <div class="flex qr-body" >
                          <div class="flex qrCode" v-loading='qrLoad'>
                                <div class="qr-remark"
                                  v-if="qrMask"
                                >
                                  <div class="t-c" >
                                    <p class="text-black">{{$t('platform.auth.qrCodeFail') }} </p>
                                    <el-button type="primary" v-on:click="reloadQrCode">{{$t('platform.auth.refresh')}}</el-button>                    
                                  </div>
                                </div>
                                <img  :src="qrCode" alt=""  class="img" >
                          </div> 
                        </div>
                      </el-tab-pane>
                    </el-tabs>
                  </el-card>
              </div>
            </div>
          </div>
          <el-row class="footer"  v-if="buttonShow =='true' ">
            <el-col :span="7">
              <el-image
              class="img"
              src="https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/qrCode.jpg?x-oss-process=style/thumb"
              :preview-src-list="['https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/qrCode.jpg?x-oss-process=style/thumb']">
              ></el-image>
            </el-col>
            <el-col :span="4">
              <div class="text">
                <p><strong>{{$t('platform.auth.leftTip1')}}</strong></p>
                <p>{{$t('platform.auth.leftTip2')}}</p>
                <p>{{$t('platform.auth.leftTip3')}}</p>
            </div>
            </el-col>
            <el-col :span="6">
              <el-image
              class="img"
              src="https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/wxappQrcode.jpg?x-oss-process=style/thumb"
              :preview-src-list="['https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/wxappQrcode.jpg?x-oss-process=style/thumb']">
              ></el-image>
            </el-col>
            <el-col :span="5">
              <div class="text">
                <p><strong>{{$t('platform.auth.rightTip1')}}</strong></p>
                <p>{{$t('platform.auth.rightTip2')}}</p>
                <p>{{$t('platform.auth.rightTip3')}}</p>
            </div>
            </el-col>
          </el-row>
      </div>
        <!-- <el-row>
            <el-col :span="24" class="t-c font-size-16" style="line-height:60px;" >
                ©版权所有  <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2020130674号-1</a>
            </el-col>
        </el-row> -->
    </div>
  </template>
  
  <style lang="scss" scoped>

  ::v-deep .el-form-item__label{
    color: #d9e6f3;
    margin: 0;
  }
  ::v-deep .el-card__body{
    padding-bottom:  0 !important;
  }
    ::v-deep .el-tabs__item{
      color: white;
      &:hover{
        color: #409EFF;
      }
    }
    ::v-deep .is-active{
      color: #409EFF;
    }
    ::v-deep .el-tabs__nav-scroll{
      width:50%;
      margin:0 auto
    }
  
    .flex{
      display: flex;  
    }
    .login{
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      flex-direction:column;
    }
    .login-container{
      padding: 20px;
      max-height:100%;
      width: 400px;
      background: rgba(73, 72, 72, 0.3);
      box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset, 0 .5em 1em rgba(0, 0, 0, 0.6);
      border-radius: 20px;
      color: #d9e6f3;
    }
    .el-card{
      border: none;
      background: none;
      box-shadow: none;
      padding: 0;
    }
    .qr-body{
      flex-direction: column;
      color: #d9e6f3;
    }
    .qrCode{
      margin:  0 auto;
      text-align: center;
      .img{
        min-width: 250px;
        min-height: 250px;
      }
    }
    .qr-remark{
        position:absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 250px;
        width: 250px;
        background:#ffffffe6;
        z-index:999;
        text-shadow:none; 
    }
    .container-full{
      height: 100vh;
      width: 100vw;
      background: url('https://auxface-oss.oss-cn-shenzhen.aliyuncs.com/resource/pcBg.jpg?x-oss-process=style/thumb');
      background-size: 100% 100%;
    }
    .header{
      height: 10%;
      width: 100%;
      display: flex;
      align-items: center;    
      padding-left: 50px;
      color: rgb(175, 175, 247);
    }
    .content{
      width: 100%;
  
      // height:80%;
      display: flex;
      justify-content: center;
        .conten-box{
            display: flex;
            align-items:center;
            justify-content: space-between;
            width: 70%;
            max-width: 1500px;
        }
        .left-img{
            height: 100%;
        }
    }
    .footer{
      height: 20%;
      width: 100%;
      background: rgba($color: #fff, $alpha: 1.0);
      display:flex;
      align-items: center;    
      .img{
        height: 15vh;
        width: 15vh;
        opacity: 0.8;
        float: right;
        vertical-align: middle ;
      }
      .text{
        vertical-align: middle ;
        color: rgb(112, 112, 112);
        margin-left: 15px;
      }
    }
  
    .h-90-vh{
      height: 90vh;
    }
  </style> 
  <script>
  import { getQrCode, checkLogin, pcLogin } from "../api/auth"
  export default {
    data() {
      return {
        buttonShow:true,
        path:"login",
        pane: this.$t('platform.auth.accountLogin'),
        qrLoad:true,
        type:'loginForm',
        loginForm: {
          account: "",
          password: ""
        },
        rules: {
          account: [
            { required: true, message: "账号不能为空", trigger: "blur" }
          ],
          password: [
            { required: true, message: "密码不能为空", trigger: "blur" },
            { min: 6, max: 16, message: "密码长度在6-16位", trigger: "blur" }
          ]
        },
        qrCode:'',
        qrKey:'',
        qrMask:false,
        interval:'',
      };
    },
    watch:{
        '$route.name'(newVal){
            this.path = newVal;
            this.setPaneText();
        }
    },
    methods: {
      setPaneText(){
        switch (this.path) {
              case 'login':
                  this.pane = this.$t('platform.auth.accountLogin');
              break;
              case 'register':
                  this.pane = this.$t('platform.auth.register');
              break;
              case 'forget':
                  this.pane = this.$t('platform.auth.forget');
              break;

          }
      },
      toPage(name){
       this.$router.push({ 'name': name });
      },
      /**
       * @Descripttion: 获取登陆二维码
       * @name: getQrCode
       * @Author: Terry
       * @Date: 2020-09-11 17:22:24
       * @param {type}
       */
      getQrCode() {
        getQrCode().then(res=>{
          if(res.code==0){
            this.qrMask  = false;
            this.qrCode  = res.data.qrCode;
            this.qrKey  = res.data.qrKey;
            this.checkLogin();
          }else{
             this.qrMask  = true;
          }
        }).finally(()=>{
          this.qrLoad =  false;
        })
      },
      reloadqrCode(){
        this.qrLoad =  true;
        this.qrMask  = false;
        this.qrCode  = '';
        this.getQrCode();
      },
      /**
       * @Descripttion: 轮询检查登陆状态
       * @name: 
       * @Author: Terry
       * @Date: 2020-09-13 22:02:46
       * @param {type} 
       */
      checkLogin(){
        var count = 0;
        var interval = setInterval(() => {
          if(this.type !='qrCode') clearInterval(interval);
          checkLogin({'qrKey':this.qrKey}).then(res=>{
            if(res.code == 0){
              sessionStorage.setItem("auxfaceToken", res.data.token);//token
              sessionStorage.setItem("uuid", res.data.uuid);//用户uuid
              sessionStorage.setItem("myCorpCode", res.data.corpCode);//用户公司认证的uuid
              sessionStorage.setItem("avatarUrl", res.data.info.avatarUrl); //头像
              sessionStorage.setItem("nickName", res.data.info.nickName); //名称
              this.$router.push({ name: process.env.VUE_APP_HOME });
              clearInterval(interval);
            }
            if(count>=360){
              this.qrMask  = true;
              clearInterval(interval);
            } 
          }).catch(()=>{
              if(count>=360){
              this.qrMask  = true;
              clearInterval(interval);
            } 
          })
          count++;
        }, 1000);
      },
      changeType(){
        if(this.type=='qrCode') this.getQrCode();
      },
    },
    mounted() {
      this.buttonShow =process.env.VUE_APP_BASE_BOTTOM;

      this.path  = this.$route.name
      this.setPaneText();
    }
  };
  </script>
  